<template>
	<view class="container">
		<!-- 标题区 -->
		<view class="header text-center">
			<h1 class="title">培训师提醒</h1>
			<p class="subtitle">高效管理您的培训任务与签到确认</p>
		</view>

		<!-- 任务列表 -->
		<view class="task-list">
			<view class="section-title">
				<van-icon name="todo-list-o" color="#1989fa" size="16px" />
				<text class="section-title-text">待办任务</text>
			</view>

			<!-- 动态渲染任务卡片 -->
			<view v-for="(task, index) in tasks" :key="task.id" class="card" @click="handleCardClick(task.id)">
				<view class="card-header">
					<view class="task-status">
						<view :class="['status-dot', task.status === 0 ? 'status-pending' : 'status-completed']"></view>
						<text class="task-name">{{ task.title }}</text>
					</view>
					<view class="">
						<button type="primary" size="mini" @click.stop="confirmReminder(task)" v-if="!task.confirmed">
							<van-icon name="bell" size="12px" />
							<text>确认提醒</text>
						</button>
						<button plain type="info" size="mini" disabled v-else>
							<van-icon name="passed" size="12px" />
							<text>已确认</text>
						</button>
					</view>

				</view>
				<view class="divider"></view>
				<view class="card-content">
					<view class="info-item">
						<van-icon name="underway-o" size="14px" />
						<text>截止时间：{{ task.endtime }}</text>
					</view>
					<view class="info-item">
						<van-icon name="location-o" size="14px" />
						<text>地点：{{ task.location }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 确认动画 -->
		<view class="checkmark-animation" v-if="showCheckmark" @click="showCheckmark = false">
			<view class="checkmark-box">
				<van-icon name="passed" color="#07c160" size="48px" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		remind,
		getChildTaskNoEnd
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				tasks: [{
						id: 1,
						name: '课程准备任务',
						status: 'pending',
						deadline: '2023-09-15 18:00',
						location: '第一培训室',
						confirmed: false
					},
					{
						id: 2,
						name: '月度教学报告',
						status: 'completed',
						deadline: '2023-09-10 12:00',
						location: '线上提交',
						confirmed: true
					}
				],
				showCheckmark: false,
				countdown: '00:00:00'
			}
		},
		mounted() {
			this.updateCountdown();
			this.ongetChildTaskNoEnd();
		},
		methods: {
			updateCountdown() {
				const update = () => {
					const now = new Date();
					const target = new Date();
					target.setHours(24, 0, 0, 0); // 设置次日零点

					const diff = target - now;
					const hours = Math.floor(diff / (1000 * 60 * 60));
					const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
					const seconds = Math.floor((diff % (1000 * 60)) / 1000);

					this.countdown =
						`${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
				};

				setInterval(update, 1000);
				update();
			},

			handleCardClick(id) {
				console.log(id)
				// uni.navigateTo({
				// 	url: `/pages/taskDetail/taskDetail?id=${id}`
				// });
			},
			simulateNewReminder() {

				// 模拟新提醒 - 实际项目中应该使用WebSocket或定时请求
				setInterval(() => {
					const newTask = {
						id: Date.now(),
						name: '新培训通知',
						status: 'pending',
						deadline: new Date().toLocaleString(),
						location: '线上会议室',
						confirmed: false
					};

					this.tasks.unshift(newTask);

					// 显示通知
					uni.showModal({
						title: '您有新的培训通知',
						content: '请及时查看并确认',
						showCancel: false
					});
				}, 300000); // 每5分钟模拟新提醒
			},
			// 获取任务列表
			async ongetChildTaskNoEnd() {
				try {
					const res = await getChildTaskNoEnd({
						teacherId: uni.getStorageSync("teacher").id
					});

					if (res.state === 'ok') {
						this.tasks = res.data.map(item => ({
							id: item.ID,
							title: item.title,
							endtime: item.endtime,
							location: item.location,
							status: item.status,
							confirmed: !!item.remind_status // 根据remind_status判断是否已确认
						}));
					}
				} catch (error) {
					uni.showToast({
						title: '获取任务列表失败',
						icon: 'none'
					});
				}
			},

			// 确认提醒
			async confirmReminder(task) {
				try {
					const res = await remind({
						taskId: task.id,
					});

					if (res.state === 'ok') {
						// 更新确认状态
						const taskIndex = this.tasks.findIndex(t => t.id === task.id);
						if (taskIndex > -1) {
							this.$set(this.tasks, taskIndex, {
								...this.tasks[taskIndex],
								confirmed: true
							});
						}

						// 显示确认反馈
						uni.vibrateShort();
						this.showCheckmark = true;
						setTimeout(() => {
							this.showCheckmark = false;
						}, 1000);
					}
				} catch (error) {
					console.error('确认提醒失败:', error);
					uni.showToast({
						title: '确认提醒失败',
						icon: 'none'
					});
				}
			},
		}
	}
</script>

<style>
	/* 基础样式 */
	.container {
		padding: 20px;
		background-color: #f8fafc;
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
		color: #1e293b;
	}

	/* 标题区样式 */
	.header {
		margin-bottom: 32px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #1e293b;
		margin-bottom: 8px;
	}

	.subtitle {
		font-size: 14px;
		color: #64748b;
	}

	/* 任务列表样式 */
	.task-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}

	.section-title-text {
		font-size: 18px;
		font-weight: 600;
		color: #334155;
		margin-left: 8px;
	}

	/* 卡片样式 */
	.card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
		transition: all 0.3s ease;
	}

	.card:active {
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
		transform: translateY(-2px);
	}

	/* 卡片头部样式 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 12px;
	}

	.task-status {
		display: flex;
		align-items: center;
	}

	.task-name {
		font-size: 16px;
		font-weight: 500;
		color: #1e293b;
		margin-left: 8px;
	}

	/* 状态点样式 */
	.status-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	.status-pending {
		background-color: #f59e0b;
		animation: pulse 1.5s infinite;
	}

	.status-completed {
		background-color: #10b981;
	}

	@keyframes pulse {
		0% {
			opacity: 0.6;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0.6;
		}
	}

	/* 分割线样式 */
	.divider {
		height: 1px;
		background: linear-gradient(90deg, rgba(226, 232, 240, 0) 0%, rgba(226, 232, 240, 1) 50%, rgba(226, 232, 240, 0) 100%);
		margin: 12px 0;
	}

	/* 卡片内容样式 */
	.card-content {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.info-item {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #64748b;
	}

	.info-item text {
		margin-left: 8px;
	}

	/* 确认动画样式 */
	.checkmark-animation {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
	}

	.checkmark-box {
		background-color: #ffffff;
		border-radius: 50%;
		padding: 16px;
		animation: bounce 1s;
	}

	@keyframes bounce {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-20px);
		}
	}

	/* 按钮覆盖样式 */
	.van-button--primary {
		background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	}

	.van-button {
		height: auto;
		padding: 4px 22px;
	}
</style>